<template>
  <div class="control-bar-container">
    <div :class="['control-bar', { disabled }]" ref="control-bar">
      <div class="left" :style="{ backgroundImage: `url(${leftIcon}) ` }" @touchstart="handlLeftStart"
        @touchend="handlLeftEnd"></div>
      <div class="center">{{ name }}</div>
      <div class="right" :style="{ backgroundImage: `url(${rightIcon}) ` }" @touchstart="handlRightStart"
        @touchend="handlRightEnd"></div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      rightIconName: "add",
      leftIconName: "de",
      leftActive: false,
      rightActive: false
    };
  },
  props: {
    name: {
      default: "中部气囊充放气",
      type: String,
    },
    disabled: {
      default: false,
      type: Boolean,
    },
  },
  computed: {
    ...mapGetters(["hasFault", "imgPath"]),
    rightIcon() {
      if (!this.rightIconName) {
        return "";
      }
      if (this.rightIconName.startsWith("ic_")) {
        return require(`../assets/${this.rightIconName}.png`);
      }
      return this.rightActive
        ? require(`../assets/${this.imgPath}ic_${this.rightIconName}_On.png`)
        : require(`../assets/${this.imgPath}ic_${this.rightIconName}_Off.png`);
    },
    leftIcon() {
      if (!this.leftIconName) {
        return "";
      }
      if (this.leftIconName.startsWith("ic_")) {
        return require(`../assets/${this.leftIconName}.png`);
      }
      return this.leftActive
        ? require(`../assets/${this.imgPath}ic_${this.leftIconName}_On.png`)
        : require(`../assets/${this.imgPath}ic_${this.leftIconName}_Off.png`);
    },
  },
  methods: {
    handlLeftStart() {
      if (this.disabled) {
        return
      }
      this.leftActive = !this.leftActive;
      this.$emit("handlLeftStart")
    },
    handlLeftEnd() {
      if (this.disabled) {
        return
      }
      this.leftActive = !this.leftActive
      this.$emit("handlLeftEnd")
    },
    handlRightStart() {
      if (this.disabled) {
        return
      }
      this.rightActive = !this.rightActive
      this.$emit("handlRightStart")
    },
    handlRightEnd() {
      if (this.disabled) {
        return
      }
      this.rightActive = !this.rightActive
      this.$emit("handlRightEnd")
    },
    handleClick(e) {
      if (!this.disabled) {
        let top = e.clientY < 350 ? "bottom" : "top";
        this.$emit("handleClick", top);
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../style/public.less");

.control-bar-container {
  padding: 0 0.6rem 1.2rem;
  width: 50%;
  box-sizing: border-box;
  position: relative;
}

.control-bar {
  flex: 1;
  height: 6.4rem;
  .cardStyle();
  margin: 0;
  display: flex;
  justify-content: space-between;
  color: var(--emui_text_primary);
  text-align: center;
  padding: 0 !important;
  ;

  &.disabled {
    opacity: 0.4;
  }

  .left {
    width: 33%;
    line-height: 6.4rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 2.4rem;
  }

  .center {
    width: 34%;
    font-size: 1.6rem;
    line-height: 6.4rem;
  }

  .right {
    width: 33%;
    line-height: 6.4rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 2.4rem;
  }
}
</style>
